import { Component } from '@angular/core';

@Component({
  selector: 'app-todo',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class TodoComponent {
  newTodo = '';
  todos = [
    {
      text: '张三',
      check: false
    },
    {
      text: '李四',
      check: false
    },
    {
      text: '王五',
      check: false
    },
    {
      text: '赵六',
      check: false
    },
  ];
  doneList = [{
    text: '孙七',
    check: true
  },];

  addTodo() {
    console.log('addTodo', this.newTodo)
    if(!this.newTodo)return;
    this.todos.unshift({
      text: this.newTodo,
      check: false
    })
  }

  onCheckboxChangeDoing(idx: number) {
    console.log('onCheckboxChange', idx, this.todos[idx].check)
    if(this.todos[idx].check) {
      this.doneList.unshift({
        text: this.todos[idx].text,
        check: true
      })
      this.todos.splice(idx, 1)
    }
  }

  onCheckboxChangeDone(idx: number) {
    console.log('onCheckboxChange', idx, this.doneList[idx].check)
    if(!this.doneList[idx].check) {
      this.todos.unshift({
        text: this.doneList[idx].text,
        check: true
      })
      this.doneList.splice(idx, 1)
    }
  }
  
  deleteTodo(idx: number, type: string) {
    console.log('deleteTodo', idx)
    if(type == 'doing') {
      this.todos.splice(idx, 1)
    } else {
      this.doneList.splice(idx, 1)
    }
  }
}
